import React, { useState, useEffect } from 'react';
import { Title } from 'base/ctl/title';
import { Time } from 'base/ctl/base';
import { obj_str, useHigh, NuiBt } from 'sui';
import { g_wsn } from 'db/state';
import { loc } from 'local';
import { load_box } from './cmd';
import { BoxView } from './box';

const PairView = ({ hreturn, cur }) => {
    const [main_out, mainOut] = useState();
    const [box_pos, boxPos] = useState();
    const [high] = useHigh(10, 200)

    useEffect(() => {
        load_box(null, cur, mainOut, boxPos);
    }, [cur]);

    return (
        <div className="flex flex-col ml-2 mr-2">
            <div className="inline-flex items-center justify-between mt-2">
                <div className="inline-flex">
                    <Title label={loc("base_43")} value={g_wsn()} width="w-56"/>
                    <Title label="工单号" value={obj_str(cur, "sn")} sub="工单号" width="w-56"/>
                    <Title label="型号" value={obj_str(cur, "tech")} sub="型号" width="w-56"/>
                    <Title label="成套数" value={obj_str(cur, "dnum")} sub="成套数" width="w-56"/>
                </div>
                <Time up={true} className="text-2xl"/>
                <div className="flex">
                    <NuiBt name="log" className="h-16 mr-2" hcmd={hreturn}>返回</NuiBt>
                </div>
            </div>
            <div className="flex flex-row border border-white mt-4 w-full">
                <BoxView box={box_pos} data={main_out} title="外圈箱号" high={high} cl="green"/>
            </div>
        </div>
    );
};

export {PairView};
